<template>
  <div class="other-card">
    <el-tabs v-model="activeName" class="other-tabs" @tab-click="switchTabs">
      <el-tab-pane label="网点字段" name="serCard">
        <SerCard ref="serCard" />
      </el-tab-pane>
      <el-tab-pane label="工程师字段" name="serEmpCard">
        <SerEmpCard ref="serEmpCard" />
      </el-tab-pane>
    
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import SerCard from '../SerFieldCard/index.vue'
  import SerEmpCard from '../SerEmpFieldCard/index.vue'

  import { onMounted, ref, watch } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'

  const activeName = ref('serCard')
  const route = useRoute()
  const serCard = ref<InstanceType<typeof SerCard> | null>(null)
  const serEmpCard = ref<InstanceType<typeof SerEmpCard> | null>(null)


  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    activeName.value = tab.props.name as string
    getList()
  }

  const getList = () => {
    switch (activeName.value) {
      case 'serCard':
        serCard.value.getList()
        break
      case 'serEmpCard':
        serEmpCard.value.getList()
        break
    
    }
  }

  // 获取客服列表
  const getTeamList = () => {
    serCard.value.getList()
  }

  onMounted(() => {
    getList()
  })

  watch(
    () => route.name,
    (value) => {
      if (value === 'branchset') {
        getList()
      }
    },
  )

  defineExpose({ getTeamList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
